<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <h2>合同信息</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单号">
              <a-input
                placeholder="请输入销售合同对应的订单号"
                v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入销售合同对应的订单号' }] }]"
                @blur="blurOrderNumber($event)"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同签订时间">
              <a-date-picker
                placeholder="请输入合同签订时间"
                style="width: 100%"
                :showTime="true"
                format="yyyy-MM-DD HH:mm:ss"
                v-decorator="['contractSignTime', { rules: [{ required: true, message: '请输入合同签订时间' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同编号">
              <a-input
                placeholder="请输入合同编号"
                v-decorator="['contractNo', { rules: [{ required: true, message: '请输入合同编号' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同类型">
              <a-select
                v-decorator="['sellingType', { rules: [{ required: true, message: '请选择合同类型' }] }]"
                placeholder="请选择合同类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">个人零售</a-select-option>
                <a-select-option value="2">批售</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>销售方信息</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业名称">
              <a-input
                placeholder="请输入企业名称"
                style="width: 100%"
                v-decorator="['enterpriseName', { rules: [{ required: true, message: '请输入企业名称' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="社会信用统一代码">
              <a-input
                placeholder="请输入社会信用统一代码"
                style="width: 100%"
                :disabled="showEnterpriseUscc"
                v-decorator="['enterpriseId', { rules: [{ required: true, message: '请输入社会信用统一代码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售区域">
              <a-select
                v-decorator="['region', { rules: [{ required: true, message: '请选择销售区域' }] }]"
                placeholder="请选择销售区域"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="黄浦区">黄浦区</a-select-option>
                <a-select-option value="徐汇区">徐汇区</a-select-option>
                <a-select-option value="长宁区">长宁区</a-select-option>
                <a-select-option value="静安区">静安区</a-select-option>
                <a-select-option value="普陀区">普陀区</a-select-option>
                <a-select-option value="虹口区">虹口区</a-select-option>
                <a-select-option value="杨浦区">杨浦区</a-select-option>
                <a-select-option value="闵行区">闵行区</a-select-option>
                <a-select-option value="宝山区">宝山区</a-select-option>
                <a-select-option value="嘉定区">嘉定区</a-select-option>
                <a-select-option value="浦东新区">浦东新区</a-select-option>
                <a-select-option value="金山区">金山区</a-select-option>
                <a-select-option value="松江区">松江区</a-select-option>
                <a-select-option value="青浦区">青浦区</a-select-option>
                <a-select-option value="奉贤区">奉贤区</a-select-option>
                <a-select-option value="崇明区">崇明区</a-select-option>
                <a-select-option value="外省">外省</a-select-option>
                <a-select-option value="线上平台">线上平台</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售地址">
              <a-input
                placeholder="请输入销售地址"
                v-decorator="['businessAddress', { rules: [{ required: true, message: '请输入销售地址' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售顾问姓名">
              <a-auto-complete
                :data-source="saleSource"
                @select="saleSelect"
                @change="saleChange"
                placeholder="请输入销售顾问姓名"
                style="width: 100%"
                v-decorator="['salesName', { rules: [{ required: true, message: '请输入销售顾问姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售顾问联系电话">
              <a-input
                placeholder="请输入销售顾问联系电话"
                v-decorator="['salesPhone', { rules: [{ required: true, message: '请输入销售顾问联系电话' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>购买方信息(与"机动车销售统一发票"信息一致)</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="购买方姓名">
              <a-input
                placeholder="请输入购买方姓名"
                v-decorator="['buyerName', { rules: [{ required: true, message: '请输入购买方姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="购买方手机号码">
              <a-input
                placeholder="请输入购买方手机号码"
                v-decorator="['buyerPhone', { rules: [{ required: true, message: '请输入购买方手机号码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="购买方性质">
              <a-select
                v-decorator="['buyerType', { rules: [{ required: false, message: '请选择购买方性质' }] }]"
                placeholder="请选择购买方性质"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">个人</a-select-option>
                <a-select-option value="2">公司</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件类型">
              <a-select
                v-decorator="['pinType', { rules: [{ required: true, message: '请选择购买方证件类型' }] }]"
                placeholder="请选择购买方证件类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">身份证</a-select-option>
                <a-select-option value="2">护照</a-select-option>
                <a-select-option value="3">士兵证军官证</a-select-option>
                <a-select-option value="4">港澳居民居住证</a-select-option>
                <a-select-option value="5">港澳居民来往内地通行证</a-select-option>
                <a-select-option value="6">台湾居民居住证</a-select-option>
                <a-select-option value="7">台湾居民来往大陆通行证</a-select-option>
                <a-select-option value="8">外国人永久居留身份证</a-select-option>
                <a-select-option value="9">其他有效身份证明</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件号码">
              <a-input
                placeholder="请输入证件号码"
                v-decorator="['pinNumber', { rules: [{ required: true, message: '请输入证件号码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>车辆信息</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车品牌">
              <a-input
                placeholder="请输入汽车品牌"
                v-decorator="['carBrand', { rules: [{ required: true, message: '请输入汽车品牌' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车型号">
              <a-input
                placeholder="请输入汽车型号"
                v-decorator="['carModel', { rules: [{ required: false, message: '请输入汽车型号' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆类型">
              <a-select
                v-decorator="['carType', { rules: [{ required: true, message: '请输入车辆类型' }] }]"
                placeholder="请选择车辆类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">燃油车</a-select-option>
                <a-select-option value="2">新能源汽车</a-select-option>
                <!-- <a-select-option value="3">油电</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车架号">
              <a-input placeholder="请输入车架号" v-decorator="['carVin', {rules: [{ required: true, message: '请输入车架号' }] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型配置">
              <a-input
                placeholder="请输入车型配置"
                v-decorator="['carTypeConfiguration', { rules: [{ required: true, message: '请输入车型配置' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车燃料类型">
              <a-select
                v-decorator="['fuelType', { rules: [{ required: true, message: '请输入汽车燃料类型' }] }]"
                placeholder="请选择汽车燃料类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">油/电</a-select-option>
                <a-select-option value="2">电</a-select-option>
                <a-select-option value="3">油</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="外饰颜色">
              <a-input
                placeholder="请输入外饰颜色"
                v-decorator="['carColor', { rules: [{ required: true, message: '请输入外饰颜色' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内饰颜色">
              <a-input
                placeholder="请输入内饰颜色"
                v-decorator="['interiorColor', { rules: [{ required: true, message: '请输入内饰颜色' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发动机号">
              <a-input
                placeholder="请输入发动机号"
                v-decorator="['engineNumber', { rules: [{ required: false, message: '请输入发动机号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="动力蓄电池组编号">
              <a-input
                placeholder="动力蓄电池组编号"
                v-decorator="['batteryNumber', { rules: [{ required: false, message: '请输入动力蓄电池组编号' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电池发票号">
              <a-input
                placeholder="请输入电池发票号"
                v-decorator="['batteryInvoiceNumber', { rules: [{ required: false, message: '请输入电池发票号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电池发票时间">
              <a-input
                placeholder="请输入电池发票时间"
                v-decorator="['batteryInvoiceTime', { rules: [{ required: false, message: '请输入电池发票时间' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合格证号">
              <a-input placeholder="请输入合格证号" v-decorator="['qualifiedNumber', {}]" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="货物进口证明书编号">
              <a-input placeholder="货物进口证明书编号" v-decorator="['importProveNumber', {}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="进口机动车辆随车检验单号">
              <a-input placeholder="进口机动车辆随车检验单号" v-decorator="['importEngineNumber', {}]" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="充电条件落实方式">
              <a-select
                v-decorator="['chargeCondition', { rules: [{ required: false, message: '请选择充电条件落实方式' }] }]"
                placeholder="请选择充电条件落实方式"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">自建</a-select-option>
                <a-select-option value="2">专用</a-select-option>
                <a-select-option value="3">公用用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>支付信息</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="总价">
              <a-input-number
                placeholder="总价"
                style="width: 100%"
                v-decorator="['finalPrice', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款类型">
              <a-select
                v-decorator="['paytype', { rules: [{ required: true, message: '必填项' }] }]"
                placeholder="请选择付款类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">按揭</a-select-option>
                <a-select-option value="2">一次性付款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-form-model
            ref="dynamicValidateForm"
            :model="dynamicValidateForm"
            v-bind="formItemLayoutWithOutLabel"
          >
            <a-form-model-item
              v-for="(paymentMethodJson, index) in dynamicValidateForm.paymentMethodJson"
              :key="paymentMethodJson.key"
            >
              <a-col :xs="24" :sm="7">
                <a-form-model-item
                  style="margin-bottom: 0px"
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '支付方式' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentMethod'"
                  :rules="{
                    required: false,
                    message: '必填项',
                  }"
                >
                  <a-select placeholder="请选择支付方式" v-model="paymentMethodJson.paymentMethod">
                    <a-select-option value>请选择</a-select-option>
                    <a-select-option value="1">刷卡</a-select-option>
                    <a-select-option value="2">转账</a-select-option>
                    <a-select-option value="3">支票</a-select-option>
                    <a-select-option value="4">现金</a-select-option>
                    <a-select-option value="5">微信</a-select-option>
                    <a-select-option value="6">支付宝</a-select-option>
                    <a-select-option value="7">银行承兑汇票</a-select-option>
                    <a-select-option value="8">预付</a-select-option>
                    <a-select-option value="9">本票</a-select-option>
                    <a-select-option value="10">会员电子账户</a-select-option>
                    <a-select-option value="11">门店储值卡</a-select-option>
                    <a-select-option value="13">券支付</a-select-option>
                    <a-select-option value="14">电汇</a-select-option>
                    <a-select-option value="15">挂账</a-select-option>
                    <a-select-option value="16">公户</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="7">
                <a-form-model-item
                  style="margin-bottom: 0px"
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '金额' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentAmount'"
                  :rules="{
                    required: false,
                    message: '必填项',
                  }"
                >
                  <a-input-number
                    placeholder="金额"
                    style="width: 100%"
                    v-model="paymentMethodJson.paymentAmount"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="8">
                <a-form-model-item
                  style="margin-bottom: 0px"
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '付款时间' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentDate'"
                  :rules="{
                    required: false,
                    message: '必填项',
                  }"
                >
                  <a-date-picker
                    placeholder="付款时间"
                    style="width: 100%"
                    :showTime="true"
                    format="yyyy-MM-DD HH:mm:ss"
                    v-model="paymentMethodJson.paymentDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="1">
                <a-icon
                  v-if="dynamicValidateForm.paymentMethodJson.length > 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="dynamicValidateForm.paymentMethodJson.length === 1"
                  @click="removeDomain(paymentMethodJson)"
                />
              </a-col>
            </a-form-model-item>
            <a-form-model-item
              :wrapperCol="{
                xs: { span: 24, offset: 0 },
                sm: { span: 20, offset: 4 },
              }"
            >
              <a-button type="dashed" style="width: 80%" @click="addDomain">
                <a-icon type="plus" />添加表单
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-row>
        <a-row>
          <h2>交易信息(与"机动车销售统一发票"信息一致)</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开票日期">
              <a-date-picker
                placeholder="请输入开票日期"
                style="width: 100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['invoiceTime', { rules: [{ required: false, message: '请输入订单日期' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票代码">
              <a-input
                placeholder="发票代码"
                v-decorator="['invoiceCode', { rules: [{ required: false, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票号码">
              <a-input
                placeholder="发票号码"
                v-decorator="['invoiceNumber', { rules: [{ required: false, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="不含税价">
              <a-input-number
                placeholder="不含税价"
                style="width: 100%"
                v-decorator="['excludingTaxPrice', { rules: [{ required: false, message: '请输入不含税价' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="价税合计">
              <a-input-number
                placeholder="请输入价税合计"
                style="width: 100%"
                v-decorator="['invoicePrice', { rules: [{ required: false, message: '请输入价税合计' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="总实收">
              <a-input-number
                placeholder="请输入总实收"
                style="width: 100%"
                v-decorator="['receivedamount', { rules: [{ required: false, message: '请输入总实收' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>预交付信息</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付方式">
              <a-select
                v-decorator="['deliveryMethod', { rules: [{ required: true, message: '必填项' }] }]"
                placeholder="请选择交付方式"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">自提</a-select-option>
                <a-select-option value="2">委托</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预定交车地点">
              <a-input
                placeholder="预定交车地点"
                v-decorator="['deliveryAddr', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预定交车时间">
              <a-input
                placeholder="请输入预定交车时间"
                style="width: 100%"
                v-decorator="['deliveryTime', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>代办服务</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否含代办服务">
              <a-select
                @change="changeIsagentOrNot"
                v-decorator="['agentOrNot', { rules: [{ required: true, message: '必填项' }] }]"
                placeholder="请选择含代办服务"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="2">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="showDing">
          <a-form-model
            ref="dynamicValidateForm2"
            :model="dynamicValidateForm2"
            v-bind="formItemLayoutWithOutLabel"
          >
            <a-form-model-item
              v-for="(agentContentsJson, index) in dynamicValidateForm2.agentContentsJson"
              :key="agentContentsJson.key"
            >
              <a-col :xs="24" :sm="11">
                <a-form-item
                  style="margin-bottom: 0px"
                  v-bind="
                    index === 0
                      ? formItemLayout2
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 18, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '代办项目内容' : ''"
                  :prop="'agentContentsJson[' + index + '].agentContents'"
                  :rules="{
                    required: true,
                    message: '必填项',
                  }"
                >
                  <a-textarea
                    placeholder="代办项目内容"
                    style="width: 200%"
                    v-model="agentContentsJson.agentContents"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="10">
                <a-form-item
                  style="margin-bottom: 0px"
                  v-bind="
                    index === 0
                      ? formItemLayout2
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 18, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '备注情况' : ''"
                  :prop="'agentContentsJson[' + index + '].remarks'"
                  :rules="{
                    required: true,
                    message: '必填项',
                  }"
                >
                  <a-textarea
                    placeholder="备注情况"
                    style="width: 200%"
                    v-model="agentContentsJson.remarks"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="1">
                <a-icon
                  v-if="dynamicValidateForm2.agentContentsJson.length > 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="dynamicValidateForm2.agentContentsJson.length === 1"
                  @click="removeDomain2(agentContentsJson)"
                />
              </a-col>
            </a-form-model-item>

            <a-form-model-item
              :wrapperCol="{
                xs: { span: 24, offset: 0 },
                sm: { span: 20, offset: 4 },
              }"
            >
              <a-button type="dashed" style="width: 80%" @click="addDomain2">
                <a-icon type="plus" />添加表单
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-row>
      </a-form>
    </a-spin>
    <a-button type="primary" @click="saveDraft">暂存</a-button>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'CxmContractManagerModal',
  data() {
    return {
      title: '合同信息',
      visible: false,
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      orderNumber: "",
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmContractManager/add',
        edit: '/cxm/cxmContractManager/edit',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        getSaleInfos: '/cxm/cxmContractManager/getSaleInfos'
      },
      showDing: false,

      //动态表单
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 24, offset: 0 },
        },
      },
      dynamicValidateForm: {
        // paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }],
        paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }],
      },
      dynamicValidateForm2: {
        agentContentsJson: [{ key: Date.now(), agentContents: '', remarks: '' }],
      },
      showEnterpriseUscc: false,
    }
  },
  /* created() {
    this.dynamicValidateForm = {
      paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }],
    }
    this.dynamicValidateForm2 = {
      agentContentsJson: [{ key: Date.now(), agentContents: '', remarks: '' }],
    }
  }, */
  created() {

  },
  methods: {
    blurOrderNumber(e) {
      console.log(e.target.value)
      let orderNumber = e.target.value;
      let httpurl = this.url.getSaleInfos;
      let params = {
        orderNumber: orderNumber
      }
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.model = res.result;
          this.$nextTick(() => {
            this.form.setFieldsValue({
              // agentOrNot: this.model.agentOrNot,
              // batteryInvoiceNumber: this.model.batteryInvoiceNumber,
              // batteryInvoiceTime: this.model.batteryInvoiceTime,
              batteryNumber: this.model.batteryNumber,
              // businessAddress: this.model.businessAddress,
              buyerName: this.model.ownerName,
              buyerPhone: this.model.ownerPhone,
              // buyerType: this.model.buyerType,
              carBrand: this.model.carBrand,
              carColor: this.model.carColor,
              carModel: this.model.carModel,
              carType: this.model.carType,
              carTypeConfiguration: this.model.carTypeConfiguration,
              carVin: this.model.carVin,
              // chargeCondition: this.model.chargeCondition,
              // contractNo: this.model.contractNo,
              // contractSignTime: this.model.contractSignTime ? moment(this.model.contractSignTime) : null,
              // deliveryAddr: this.model.deliveryAddr,
              // deliveryMethod: this.model.deliveryMethod,
              // deliveryTime: this.model.deliveryTime ? moment(this.model.deliveryTime) : null,
              engineNumber: this.model.engineNumber,
              // enterpriseId: this.model.enterpriseId,
              enterpriseName: this.model.enterpriseName,
              enterpriseId: this.model.enterpriseUscc,
              // excludingTaxPrice: this.model.excludingTaxPrice,
              finalPrice: this.model.quoteAmount,
              fuelType: this.model.fuelType,
              importEngineNumber: this.model.importEngineNumber,
              importProveNumber: this.model.importProveNumber,
              interiorColor: this.model.interiorColor,
              // invoiceCode: this.model.invoiceCode,
              // invoiceNumber: this.model.invoiceNumber,
              // invoicePrice: this.model.invoicePrice,
              // invoiceTime: this.model.invoiceTime ? moment(this.model.invoiceTime) : null,
              // orderNumber: this.model.orderNumber,
              businessAddress: this.model.operationAddr,
              // paytype: this.model.paytype,
              pinNumber: this.model.documentNumber,
              pinType: this.model.documentType,
              salesPhone: this.model.phone,
              qualifiedNumber: this.model.qualifiedNumber,
              // receivedamount: this.model.receivedamount,
              // region: this.model.region,
              region: this.model.registerDistinct,
              salesName: this.model.salename,
               // salesPhone: this.model.phone,
              // sellingType: this.model.sellingType,
            })
          })
          if (this.model.enterpriseUscc) {
            this.showEnterpriseUscc = true;
          } else {
            this.showEnterpriseUscc = false;
          }
        }
      })

    },
    saleSelect(value) {
      console.log('saleSelect', value);
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("salesName"));
        let httpurl = this.url.getSaleInfosLike;
        let params = {
          salesName: this.form.getFieldValue("salesName")
        }

        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          console.log(res);
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result;
            this.saleSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName);
              if (i > 8) {
                break;
              }
            }
          }
        })
      }, 100);
    },
    changeIsagentOrNot(val) {
      if (val == '1') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add() {
      let httpurl = this.url.getDraft;
      let params = {
        bType: "contract"
      };
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          this.edit(JSON.parse(res.result))
        } else {
          this.edit({})
        }
      })
    },
    edit(record) {
      console.log(record);
      this.visible = true
      if (record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        console.log(this.model);

        this.dynamicValidateForm.paymentMethodJson = JSON.parse(record.paymentMethodJson);
        this.dynamicValidateForm2.agentContentsJson = JSON.parse(record.agentContentsJson);
        this.changeIsagentOrNot(this.model.agentOrNot)
        this.$nextTick(() => {
          this.form.setFieldsValue({
            agentOrNot: this.model.agentOrNot,
            batteryInvoiceNumber: this.model.batteryInvoiceNumber,
            batteryInvoiceTime: this.model.batteryInvoiceTime,
            batteryNumber: this.model.batteryNumber,
            businessAddress: this.model.businessAddress,
            buyerName: this.model.buyerName,
            buyerPhone: this.model.buyerPhone,
            buyerType: this.model.buyerType,
            carBrand: this.model.carBrand,
            carColor: this.model.carColor,
            carModel: this.model.carModel,
            carType: this.model.carType,
            carTypeConfiguration: this.model.carTypeConfiguration,
            carVin: this.model.carVin,
            chargeCondition: this.model.chargeCondition,
            contractNo: this.model.contractNo,
            contractSignTime: this.model.contractSignTime ? moment(this.model.contractSignTime) : null,
            deliveryAddr: this.model.deliveryAddr,
            deliveryMethod: this.model.deliveryMethod,
            deliveryTime: this.model.deliveryTime,
            engineNumber: this.model.engineNumber,
            enterpriseId: this.model.enterpriseId,
            enterpriseName: this.model.enterpriseName,
            excludingTaxPrice: this.model.excludingTaxPrice,
            finalPrice: this.model.finalPrice,
            fuelType: this.model.fuelType,
            importEngineNumber: this.model.importEngineNumber,
            importProveNumber: this.model.importProveNumber,
            interiorColor: this.model.interiorColor,
            invoiceCode: this.model.invoiceCode,
            invoiceNumber: this.model.invoiceNumber,
            invoicePrice: this.model.invoicePrice,
            invoiceTime: this.model.invoiceTime ? moment(this.model.invoiceTime) : null,
            orderNumber: this.model.orderNumber,
            paytype: this.model.paytype,
            pinNumber: this.model.pinNumber,
            pinType: this.model.pinType,
            qualifiedNumber: this.model.qualifiedNumber,
            receivedamount: this.model.receivedamount,
            region: this.model.region,
            salesName: this.model.salesName,
            salesPhone: this.model.salesPhone,
            sellingType: this.model.sellingType,
          })
        })
      }

    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          this.model.id=null;
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(
            this.model,
            values,
            {
              paymentMethodJson: JSON.stringify(this.dynamicValidateForm.paymentMethodJson),
            },
            {
              agentContentsJson: JSON.stringify(this.dynamicValidateForm2.agentContentsJson),
            }
          )
          //时间格式化 contractSignTime
          //formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.contractSignTime = formData.contractSignTime
            ? formData.contractSignTime.format('YYYY-MM-DD HH:mm:ss')
            : null
          formData.invoiceTime = formData.invoiceTime ? formData.invoiceTime.format('YYYY-MM-DD HH:mm:ss') : null
          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(this.model, values, {
          paymentMethodJson: JSON.stringify(this.dynamicValidateForm.paymentMethodJson),
        },
          {
            agentContentsJson: JSON.stringify(this.dynamicValidateForm2.agentContentsJson),
          });
        //时间格式化 contractSignTime
        //formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null
        formData.contractSignTime = formData.contractSignTime
          ? formData.contractSignTime.format('YYYY-MM-DD HH:mm:ss')
          : null
        formData.invoiceTime = formData.invoiceTime ? formData.invoiceTime.format('YYYY-MM-DD HH:mm:ss') : null
        let httpurl = this.url.saveDraft;

        console.log(JSON.stringify(formData));
        let Data = {};
        Data.btype = "contract";
        Data.content = JSON.stringify(formData);
        console.log(Data);
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },

    //移除表单
    removeDomain(item) {
      let index = this.dynamicValidateForm.paymentMethodJson.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.paymentMethodJson.splice(index, 1)
      }
    },
    removeDomain2(item) {
      let index = this.dynamicValidateForm2.agentContentsJson.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm2.agentContentsJson.splice(index, 1)
      }
    },
    //添加表单
    addDomain() {
      this.dynamicValidateForm.paymentMethodJson.push({
        key: Date.now(),
      })
    },
    addDomain2() {
      this.dynamicValidateForm2.agentContentsJson.push({
        key: Date.now(),
      })
    },
  },
}
</script>

<style lang="less" scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>